

<template>
    <view class="cus-page">
        <!-- BG -->
		<!-- <image class="bg" src="/static/me/me_head_bg.png" alt=""></image> -->
        <!-- 头部搜索 -->
		<ct-navbar leftIconType="back" title="会员等级" :search="{show:false}" /> 
		<!-- 顶部安全距离 -->
		<u-gap :height="topHeight+'px'" bgColor="transparent"></u-gap>

        <!-- 等级 -->
        <view class="type-area com-flex-col com-row-center com-col-center grade-box">
            <image class="grade" src="/static/me/grade.png" alt=""></image>
            <text class="com-m-t-8 com-font-32 com-font-bold">当前等级LV.1</text>
            <view class="com-m-t-30">
                <view class="line-box">
                    <view class="line" :style="{width:progress ? '50%' : 0}"></view>
                </view>
                <view class="com-m-t-16 com-flex com-row-between">
                    <text style="color:#02BDF3">Lv1</text>
                    <text class="com-font-24 com-minor-color">距离下一级还差25经验</text>
                    <text style="color:#A890FF">Lv2</text>
                </view>
            </view>
        </view>

        <!-- 间隔 -->
        <u-gap height="20rpx" bgColor="#F8F8F8"></u-gap>
        
        <!-- 经验明细 -->
        <view class="detail">
            <text class="com-font-32 com-active-color">经验明细</text>
            <view v-for="item in 9" :key="item" class="com-flex com-row-between item">
                <view class="com-flex-col">
                    <text>会员经验</text>
                    <text class="com-m-t-16 com-font-24 com-assist-color">会员经验</text>
                </view>
                <text class="com-font-32 com-active-color">+35</text>
            </view>
        </view>
    </view>
</template>


<script>
export default {
    name:'memberGrade', // 会员等级
    props:{},
    components: {},

    data () {
        return {
            topHeight: 44, // 顶部安全距离
            progress: false,
        }
    },

    computed: {},
    watch: {},

    onLoad(){
        this.setTopHeight();
    },

    mounted() {
        setTimeout(() => {
            this.progress = true
        }, 500);
    },

    methods: {
        // 设置顶部安全距离
		setTopHeight(){
			const sysInfo = this.mixinGetSysInfo();
			const statusBarHeight = sysInfo.statusBarHeight;
			//  #ifdef MP-WEIXIN
			const navBarH = sysInfo.capsule.navBarH;
			this.topHeight = statusBarHeight + navBarH;
			//  #endif
			//  #ifdef APP-PLUS
			this.topHeight = statusBarHeight + 44;
			//  #endif
		},
    },
}
</script>


<style scoped lang='scss'>
    .bg{
		width: 100%;
		height: 480rpx;
		position: fixed;
		top: 0;
		left: 0;
        background: linear-gradient(0deg, #C3B0FF, #75EAFF);
	}
    .grade-box{
        margin-top: 48rpx;
        padding-bottom: 60rpx;
        background: linear-gradient(to bottom, transparent 0%, #fff 100%);
        position: relative;
        z-index: 100;
        .grade{
            width: 240rpx;
            height: 240rpx;
        }
        .line-box{
            width: 590rpx;
            height: 16rpx;
            background: #E6E6E6;
            border-radius: 16rpx;
            .line{
                transition: width .3s;
                height: 16rpx;
                background: linear-gradient(-90deg, #C3B0FF 0%, #39E3FD 100%);
                border-radius: 16rpx;
            }
        }
    }
    .detail{
        background: #fff;
        padding: 40rpx 32rpx;
        .item{
            padding: 28rpx 0;
            border-bottom: 1px solid #F8F8F8;
            &:last-child{
                border: none;
            }
        }
    }
</style>